/**
 * Created by xxx on 2017年12月11日.
 */
//用react封装
var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
//表单的最高高度、当前第几页、总页数、总行数
var otherData = {pageLeft:0,pageRight:0};
//分页
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="studentsInfo-page tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                        {
                            items.map(function (item) {
                                return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                            })
                        }
                        <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)}><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                    </ol>
                </div>
            </div>
        );
    },
});
/**
 * sim表单
 * @type {*}
 */
var CommentTable = React.createClass({
    clickChecked: function () {
        var childsCheckBox = $(".table-select").children();
        var b = 0,a = 0;
        for(var i = 0;i<childsCheckBox.length;i++){
            var child = $($(childsCheckBox[i]).children()[0]).children();
            if($(child[0]).length == 0){
                a ++;
            }
            if($(child[0]).is(':checked')){
                b ++;
            }
        };
        if(b == childsCheckBox.length-a){
            $(".checkBox").prop('checked',true);
        }else{
            $('.checkBox').attr('checked',false);
        }
    },
    render: function () {
        return (
            <tr>
                <td style={{width: '8%'}}><input onClick={this.clickChecked} className="childCheckBox" data-value={this.props.trData.id} type="checkbox"/></td>
                <td style={{width: '12%'}}>{parseInt(this.props.listNumber)+1}</td>
                <td style={{width: '15%'}}>{this.props.trData.userName?this.props.trData.userName!='undefined'?this.props.trData.userName:'---':'---'}</td>
                <td style={{width: '20%'}}>{suixun.getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(this.props.trData.createTime))}</td>
                <td style={{width: '30%'}}>{this.props.trData.content}</td>
                <td style={{width: '15%'}}><div className="trButton trLeft table-delete" onClick={this.props.onClickCommentDelete}>删除</div></td>
            </tr>
        );
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            commentData: [],//评论数据
            isQuery: false,//导航内容
            droupNmae: '评论内容'
        }
    },
    componentDidMount: function () {
        suixun.hideLoding();//隐藏加载中
        //绑定回车时间
        $(document).keypress(function(e) {
            var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
            if (eCode == 13){
                if($("#commentQuery").is(":focus")){
                    this.getCommonData(this.state.droupNmae,1);
                }
            }
        }.bind(this));
    },
    /**
     * 获取评论列表数据
     * @param page 从好多页开始
     */
    getCommonData: function(droupNmae,page){
        var svar = this,value = $("#commentQuery").val();
        // if(value==''){
        //     suixun.alert('输入框不能为空！');
        //     return;
        // }
        var url = serverUrl+'/article/getArticleCommentPage?page='+page+'&size='+pagecount;
        if(droupNmae=='评论内容'){
            url +='&content='+value;
        }else  if(droupNmae=='评论用户'){
            url +='&userName='+value;
        }
        suixun.showLoding();//显示加载中
        suixun.ajax(url,'',"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                var getPageInfoTwo = suixun.getPageInfoTwo(page,data.info.pages);
                otherData.pageLeft = getPageInfoTwo.pageLeft;
                otherData.pageRight = getPageInfoTwo.pageRight;
                totlepage = getPageInfoTwo.totlepage;
                currentpage = page;
                if(data.info.list != null && data.info.list.length>0){
                    svar.setState({commentData:data.info.list,otherData:otherData,isQuery:true});
                }else{
                    svar.setState({commentData:[],otherData:otherData,isQuery:true});
                }
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }
        this.getCommonData(this.state.droupNmae,currentpage);
    },
    /**
     * 批量删除评论
     * @return {XML}
     */
    deleteComment: function () {
        var idList="";
        $(".childCheckBox").each(function(i,box) {
            if(box!=null && box.checked)
                idList+=$(box).attr("data-value")+"|";
        });

        if(idList.length>1){
            idList=idList.substring(0,idList.length-1);
        }else{
            suixun.alert("请先选择要删除的评论！");
            return false;
        }
        this.onClickCommentDelete(idList);
    },
    /**
     * 删除评论操作
     * @return {XML}
     */
    onClickCommentDelete: function (commentIds) {
        var svar = this;
        suixun.confirm_noTit('是否确定删除？',function (data) {
            if(data){
                var data = new FormData();
                data.append("commentIds",commentIds);
                suixun.showLoding();//显示加载中
                suixun.ajax(serverUrl+'/article/deleteArticleComments',data,"post",function(data){
                    suixun.hideLoding();//隐藏加载中
                    if(data.code == 200){
                        suixun.alert('操作成功!',function (data) {
                            if(data){
                                svar.onPageClick(currentpage);//更新数据
                            }
                        });
                    }else{
                        suixun.alert(data.msg);
                    }
                });
            }
        });
    },
    /**
     * 是否选择全部
     */
    thCheckbox: function () {
        if($(".checkBox").is(":checked")){
            $(".childCheckBox").prop("checked",true);
        }else{
            $(".childCheckBox").attr("checked",false);
        }
    },
    /**
     * 设置下拉选择框内容
     * @return {XML}
     */
    setDroup: function (name) {
        if(name != this.state.droupNmae){
            $("#queryInput").val('');
        }
        this.setState({droupNmae:name});
    },
    render: function () {
        {
            /**
             * 评论数据
             */
            var Tabels = this.state.commentData.map(function (data,index) {
                return (
                    <CommentTable key={data.id} onClickCommentDelete={this.onClickCommentDelete.bind(this,data.id)} listNumber={index} trData={data}/>
                )
            }.bind(this));
        }
        return (
            <div className="tableManage-body commentManage">
                <header>
                    <div className="header-left">
                        {/*<div className="header-left">*/}
                            {/*<div className="header-left-studentInfo">*/}
                                {/*<span className="header-left-button showOrder ">评论管理</span>*/}
                            {/*</div>*/}
                        {/*</div>*/}
                        <div className='navigation'>评论管理</div>
                    </div>
                    <div className="header-right left" >
                        <div className="header-right-select droup-select droup-type" >
                            <div className="school-or-table school-or-parent">{this.state.droupNmae}</div>
                            <span className="lower-right-corner"/>
                            <div className="drop-down left-drop-down" >
                                <span className="select-value school-name" onClick={this.setDroup.bind(this,'评论内容')}>评论内容</span>
                                <span className="select-value school-name" onClick={this.setDroup.bind(this,'评论用户')}>评论用户</span>
                            </div>
                        </div>
                        <div className="header-query retrieval" style={{width:"300px"}}>
                            <div className="header-query-input" style={{width:"245px"}}>
                                <input className="query-value enterEvent" type="text" id="commentQuery" maxLength="50" placeholder={"请输入"+this.state.droupNmae+"关键字搜索"}/>
                            </div>
                            <div className="header-query-img"  onClick={this.getCommonData.bind(this,this.state.droupNmae,'1')}/>
                        </div>
                        <div className="header-right-botton left" onClick={this.getCommonData.bind(this,this.state.droupNmae,'1')}>搜索</div>
                    </div>
                    <div className="header-right" >
                        {
                            this.state.isQuery?
                                <div className="header-right-botton" style={{marginTop:"50px"}} onClick={this.deleteComment.bind(this)}>批量删除</div>:''
                        }
                    </div>
                </header>
                {
                    this.state.isQuery?
                        <div className="tableInfo" style={{marginTop:"50px"}} >
                            <div className="tableInfo-data">
                                <div className="tableInfo-data-table" >
                                    <table className="head-body">
                                        <thead>
                                        <th style={{width: '8%'}}><input type="checkbox" className="checkBox" onClick={this.thCheckbox.bind(this)}/></th>
                                        <th style={{width: '12%'}}>序号</th>
                                        <th style={{width: '15%'}}>评论人</th>
                                        <th style={{width: '20%'}}>评论人时间</th>
                                        <th style={{width: '30%'}}>评论内容</th>
                                        <th style={{width: '15%'}}>操作</th>
                                        </thead>
                                        <tbody className="table-select">
                                        {Tabels==""?'':Tabels}
                                        </tbody>
                                    </table>
                                    {Tabels==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                                </div>
                            </div>
                            <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                        </div>
                        :''
                }

                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
ReactDOM.render(
    <Main  otherData={otherData} />,
    document.getElementById('tableManage')
);
/**
 * 点击下拉框——下拉框依赖
 */
$(".droup-type").click(function () {
    var dropDown = $('.left-drop-down');
    if(dropDown.is(":hidden")){
        dropDown.slideDown();
    }else{
        dropDown.slideUp();
    }
});